@using PublishSoftwareWebPageCreator
@using RazorEngine.Text
@{ PageJson d = Model; }
<!DOCTYPE html>
<html lang="zh-cn" class="fontawesome-i2svg-active fontawesome-i2svg-complete">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="./asset/a.css" />
    <title>@d.title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer="" src="http://cdn.staticfile.org/font-awesome/5.15.4/js/all.min.js"></script>
    <!-- Global CSS -->
    <link rel="stylesheet" href="http://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css" media="all" />
    <link rel="stylesheet" href="http://cdn.staticfile.org/bootstrap-icons/1.8.1/font/bootstrap-icons.css">
    <!-- Theme CSS -->
    <link id="theme-style" rel="stylesheet" href="@d.theme">
</head>

<body>
    <!-- ******HEADER****** -->
    <header id="header" class="header fixed-top">
        <div class="container">
            <nav id="navbar" class="navbar navbar-expand-lg">
                <h1 class="logo navbar-brand">
                    <a class="scrollto" href="/">
                        @if (!string.IsNullOrEmpty(d.logo))
                        {<img id="logo-image" class="logo-image" src="@d.logo" alt="Logo">}
                        @if (!string.IsNullOrEmpty(d.LogoTitle))
                        {<span class="logo-title">@d.LogoTitle</span>}
                    </a>
                </h1><!--//logo-->

                <div class="navbar-collapse collapse justify-content-end" id="navbar-collapse">
                    <ul class="navbar-nav" id="navbar-nav">
                        @if (d.features != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#features">功能</a></li>
                        }
                        @if (d.how != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#how">如何使用</a></li>
                        }
                        @if (d.faq != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#faq">常见问题</a></li>
                        }
                        @if (d.story != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#story">故事</a></li>
                        }
                        @if (d.testimonials != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#testimonials">观点</a></li>
                        }
                        @if (d.pricing != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#pricing">价格</a></li>
                        }
                        @if (d.contact != null)
                        {
                            <li class="nav-item"><a class="nav-link scrollto" href="#contact">联系我们</a></li>
                        }
                    </ul><!--//nav-->
                </div><!--//navabr-collapse-->
            </nav>
        </div>
    </header><!--//header-->
    <!-- ******PROMO****** -->
    <section id="promo" class="promo section offset-header has-pattern position-relative">
        <div class="container">
            <div class="row gx-lg-5 justify-content-center">
                <div class="overview col-lg-auto col-12">
                    <h2 class="title" style="max-width: 600px;">@d.OverviewTitle</h2>
                    <ul class="summary ps-0 d-inline-block d-lg-block">
                        @foreach (string sv in d.summary)
                        {
                            <li><span class="glowing-icon me-2"></span>@sv</li>
                        }
                    </ul>
                    <div class="download-area">
                        <ul class="list-inline">
                            @foreach (Download sv in d.downloads)
                            {
                                <li class="ios-btn list-inline-item"><a href="@sv.href" class="btn btn-lg btn-danger">@sv.txt</a></li>
                            }
                        </ul>
                    </div>
                </div><!--//overview-->

                <div class="phone-holder col">
                    <div id="phone-carousel" class="phone-carousel carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="6000">

                        <div class="carousel-inner">
                            @{ int c = d.holder.Count; string active = " active"; }
                            @for (int i = 0; i < c; i++)
                            {
                                <div class="carousel-item @if (i == 0) { @(" active"); }"><img class="img-fluid" src="@d.holder[i]" alt=""></div>}
                        </div><!--//carousel-inner-->
                        <ol class="carousel-indicators mt-3">
                            @for (int i = 0; i < c; i++)
                            {
                                <li data-bs-target="#phone-carousel" data-bs-slide-to="@i.ToString()" @if (i == 0) { @(new RawString("class='active' aria-current='true'")) ; }></li>
                            }
                        </ol>
                    </div><!--//phone-carousel-->
                </div><!--//phone-holder-->
            </div><!--//row-->
        </div><!--//container-->
    </section><!--//promo-->

    @if (d.features != null)
    {
        <!--******FEATURES * *****-->
        <section id="features" class="features section">
            <div class="container">
                <div class="row justify-content-center">
                    <h2 class="title text-center sr-only">@d.features.title</h2>
                    @foreach (FeatureItem sv in d.features.items)
                    {
                        <div class="item col-lg-3 col-md-6 col-12 text-center">
                            <div class="icon">
                                <i class="@sv.IconClass" style="font-size: 2.5rem; display: inline-block; text-align: center; line-height:2.5rem; "></i>
                            </div><!--//icon-->
                            <div class="content">
                                <h3 class="title">@sv.title</h3>
                                <p>@sv.content</p>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </section>
    }
    @if (d.how != null)
    {
        <section id="how" class="how section has-pattern">
            <div class="container">
                <div class="row">
                    <div class="content col-md-6 col-12 order-md-12 text-center">
                        <h2 class="title">@d.how.title</h2>
                        <p class="intro">@d.how.intro</p>
                    </div><!--//content-->
                    <div id="video-container" class="video-container col-md-6 col-12 order-md-1">
                        <div class="ratio ratio-16x9">
                            <iframe src="@d.how.IframeSrc" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
                        </div>
                    </div><!--//video-->
                </div><!--//row-->
            </div><!--//container-->
        </section><!--//how-->
    }

    @if (d.faq != null)
    {
        <!-- ******FAQ****** -->
        <section id="faq" class="faq section">
            <div class="container">
                <h2 class="title text-center">@d.faq.title</h2>
                <div class="row">
                    @foreach (FaqItem sv in d.faq.items)
                    {
                        <div class="item">
                            <h3 class="question"><i class="fas fa-question-circle"></i>@sv.question</h3>
                            <p class="answer">@sv.answer</p>
                        </div>
                    }
                </div>
            </div>
        </section>
    }

    @if (d.story != null)
    {
        <!-- ******STORY****** -->
        <section id="story" class="story section has-pattern">
            <div class="container">
                <div class="row">
                    <div class="content col-md-7 col-12">
                        <h2 class="title text-center">@d.story.title</h2>
                        <p>@d.story.content</p>
                    </div><!--//content-->
                    <div class="team col-md-5 col-12 me-auto ms-auto">
                        <div class="row justify-content-center gx-lg-5">
                            @foreach (StoryItem sv in d.story.items)
                            {
                                <div class="member col-auto text-center">
                                    <img class="member-profile" src="@sv.img" alt="">
                                    <p class="name">@sv.name</p>
                                    <p class="title mb-0">@sv.title</p>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </section>
    }

    @if (d.testimonials != null)
    {
        <!-- ******TESTIMONIALS****** -->
        <section id="testimonials" class="testimonials section">
            <div class="container">
                <h2 class="title text-center">@d.testimonials.title</h2>
                <div class="row justify-content-center">
                    @foreach (TestimonialItem sv in d.testimonials.items)
                    {
                        <div class="item col-md-4 col-12">
                            <div class="item-inner">
                                <div class="quote-box">
                                    <i class="fas fa-quote-left"></i>
                                    <blockquote class="quote">
                                        @sv.quote
                                    </blockquote>
                                </div>
                                <div class="people row align-items-center">
                                    <div class="col-auto">
                                        <img class="rounded user-pic" src="@sv.img" alt="">
                                    </div>
                                    <div class="details col">
                                        <span class="name">@sv.name</span>
                                        <span class="title">@sv.title</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </section>
    }

    @if (d.pricing != null)
    {
        <!-- ******Pricing****** -->
        <section id="pricing" class="pricing section has-pattern">
            <div class="container">
                <h2 class="title text-center">@d.pricing.title</h2>
                <div class="price-cols row">
                    <div class="items-wrapper col-lg-10 col-12 ms-lg-auto me-lg-auto">
                        <div class="row">
                            @foreach (PricingItem sv in d.pricing.items)
                            {
                                <div class="item price-1 col-md-4 col-12 text-center">
                                    <div class="item-inner">
                                        <div class="heading">
                                            <h3 class="title">@sv.title</h3>
                                            <p class="price-figure" style="display: inline-block; text-align: center;">
                                                @(new RawString(sv.price))
                                            </p>
                                        </div>
                                        <div class="content">
                                            <ul class="list-unstyled feature-list">
                                                @foreach (FeatureList fl in sv.FeatureList)
                                                {
                                                    if (fl.check)
                                                    {
                                                        <li><i class="fas fa-check"></i>@fl.i.ToString()</li>
                                                    }
                                                    else
                                                    {
                                                        <li class="disabled"><i class="fas fa-times"></i>@fl.i.ToString()</li>
                                                    }
                                                }
                                            </ul>
                                            <a class="btn btn-theme btn-block" href="https://themes.3rdwavemedia.com/delta/bs5/2.0/#">Sign Up</a>
                                        </div>
                                        @if (sv.ribbon)
                                        {@(new RawString("<div class=\"ribbon\"><div class=\"text\">推荐</div></div>"));
                                        }
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </section>
    }

    @if (d.contact != null)
    {
        <!-- ******CONTACT****** -->
        <section id="contact" class="contact section has-pattern">
            <div class="container">
                <h2 class="title text-center">@d.contact.title</h2>
                <div class="row text-center">
                    <div class="intro col-lg-6 col-12 ms-lg-auto me-lg-auto">
                        <p>@d.contact.intro</p>
                        <ul class="list-unstyled contact-details">
                            <li><i class="fas fa-envelope"></i><a href="mailto:@d.contact.email">@d.contact.email</a></li>
                            @if (!string.IsNullOrEmpty(d.contact.phone))
                            {
                                <li><i class="fas fa-phone-volume"></i>@d.contact.phone</li>
                            }
                        </ul>
                    </div>
                </div><!--//row-->

                <div class="contact-form mx-auto text-center">
                    <form class="form" action="@d.contact.FormAction">
                        <div class="form-group name mb-3">
                            <label class="sr-only" for="name">Name</label>
                            <input id="name" type="text" class="form-control" placeholder="Name:" required="">
                        </div><!--//form-group-->
                        <div class="form-group email mb-3">
                            <label class="sr-only" for="email">Email</label>
                            <input id="email" type="email" class="form-control" placeholder="Email:" required="">
                        </div><!--//form-group-->
                        <div class="form-group message mb-3">
                            <label class="sr-only" for="message">Message</label>
                            <textarea id="message" class="form-control" rows="6" placeholder="Message:" required=""></textarea>
                        </div><!--//form-group-->
                        <button type="submit" class="btn btn-lg btn-theme">联系我们</button>
                    </form><!--//form-->
                </div><!--//contact-form-->
            </div><!--//container-->
        </section>
    }

    <!-- ******FOOTER****** -->
    <footer class="footer">
        <div class="container text-center">
            <small class="copyright">Copyright © <a href="/" target="_blank">@d.domain</a></small>
        </div>
    </footer><!--//footer-->
    <!-- Javascript -->
    <script src="http://cdn.staticfile.org/popper.js/2.11.5/umd/popper.min.js"></script>
    <script src="http://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <script src="./asset/smoothscroll.min.js"></script>
    <script src="./asset/vanilla-back-to-top.min.js"></script>
    <script src="./asset/gumshoe.polyfills.min.js"></script>
    <script src="./asset/main.js"></script>
    <div id="back-to-top" class="hidden"><svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg></div>

</body>
</html>